<template>
    <div class="input-warp">
        <div class="box" v-show="!showInput">
            <div class="button" @click="onComment">
                <i class="iconfont icon-edit"></i>
                <span>写评论...</span>
            </div>
            <div class="list">
                <div class="item" @click="scrollComment">
                    <span class="num">{{num}}</span>
                    <i class="iconfont icon-comment"></i>
                </div>
                <div class="item" @click="onLike">
                    <i class="iconfont " :class="like ? 'icon-dianzan1' : 'icon-dianzan'"></i>
                </div>
                <div class="item" @click="onCollect">
                    <i class="iconfont" :class="collect ? 'icon-shoucang1' : 'icon-shoucang'"></i>
                </div>
            </div>
        </div>
        <div class="input" v-show="showInput">
            <div class="bg" @click="onBg"></div>
            <div class="btn">
                <textarea class="text" v-model="comment" cols="30" rows="5" maxlength="100" :placeholder="tip"></textarea>
                <div class="bottom">
                    <button :class="{'active':comment.length}" @click="onRelease">发表</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'InputWarp',
    props: {
        num: {
            type: String
        },
        showInput: {
            type: Boolean,
            default: false
        },
        tip: {
            type: String
        },
        commentInfo: {
            type: Object
        },
        like: {
            type: Boolean,
            default: false
        },
        collect: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            comment: '',
            level: 1,
            commentId: 0,
            toUserId: 0
        }
    },
    methods: {
        onComment() {
            this.comment = ""
            this.$emit('onComment',true)
        },
        onBg() {
            this.comment = ""
            this.$emit('onComment',false)
        },
        onLike() {
            this.$emit('onLike')
        },
        onCollect() {
            this.$emit('onCollect')
        },
        onRelease() {
            if(this.comment.length) {
                if(JSON.stringify(this.commentInfo) == '{}') {
                    this.level = 1
                    this.commentId = 0
                    this.toUserId = 0
                }
                if(this.commentInfo.level == 1) {
                    this.level = 2
                    this.commentId = this.commentInfo.id
                    this.toUserId = this.commentInfo.from_user_id
                }else if(this.commentInfo.level == 2 || this.commentInfo.level == 3) {
                    this.level = Number(this.commentInfo.level) == 3 ? 3 : Number(this.commentInfo.level) + 1
                    this.commentId = this.commentInfo.comment_id
                    this.toUserId = this.commentInfo.from_user_id
                }
                this.$post('notice/comment/release.php',{
                    level: this.level,
                    id: this.$route.params.id,
                    commentId: this.commentId,
                    userId: this.$store.state.userInfo.id,
                    toUserId: this.toUserId,
                    comment: this.comment
                })
                .then((res) => {
                    if(res.code == 400) {
                        this.Toast(`${res.desc}`,'icon-meh',800)
                        this.$store.commit('setUserInfo','')
                    }else {
                        this.$emit('againComment')
                        this.$emit('onComment',false)
                    }
                })
            }
        },
        scrollComment() {
            document.querySelector('.page-notice').scrollTop = document.querySelector('.notice-warp').scrollHeight
        }
    }
}
</script>

<style scoped>
.input-warp .box{
    border-top:1px solid #eee;
    position: fixed;
    bottom:0;
    left:0;
    right:0;
    z-index:10;
    display: flex;
    padding:0.1rem 0.2rem;
    background:#fff;
}
.input-warp .box .button{
    background:#f1f1f1;
    color:#999;
    font-size:0.28rem;
    width:4rem;
    padding:0.1rem 0.4rem;
    border-radius:0.4rem;
}
.input-warp .box .button .iconfont{
    font-size:0.36rem;
    margin-right:0.1rem;
}
.input-warp .box .list{
    flex:1;
    margin-left:0.4rem;
    margin-right:0.2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.input-warp .box .list .item{
    font-size:0.32rem;
    width:0.52rem;
    height:0.56rem;
}
.input-warp .box .list .item .iconfont{
    font-size:0.52rem;
    color:#333;
    position: relative;
    z-index:1;
}
.input-warp .box .list .item .icon-shoucang1:active,
.input-warp .box .list .item .icon-shoucang:active,
.input-warp .box .list .item .icon-dianzan1:active,
.input-warp .box .list .item .icon-dianzan:active{
    animation:zoom 0.3s linear infinite;
}
@keyframes zoom{
    0%{
        top:0;
        left:0;
        font-size:0.52rem;
    }
    50%{
        top:0.1rem;
        left:0.1rem;
        font-size:0.2rem;
    }
    100%{
        top:0;
        left:0;
        font-size:0.52rem;
    }
}
.input-warp .box .list .item .icon-dianzan1{
    color:#FE5C43;
}
.input-warp .box .list .item .icon-shoucang1{
    color:#FFC118;
}
.input-warp .box .list .item:nth-child(1){
    position: relative;
}
.input-warp .box .list .item:nth-child(1) .num{
    padding:0.02rem 0.1rem;
    color:#fff;
    font-size:0.24rem;
    text-align: center;
    border-radius:0.2rem;
    position: absolute;
    z-index:2;
    top:-0.05rem;
    right:-0.2rem;
    background:#FF4222;
}
.input-warp .input .bg{
    position: fixed;
    top:0;
    right:0;
    left:0;
    bottom:0;
    z-index:1023;
    background:rgba(0, 0, 0, 0.4);
}
.input-warp .input .btn{
    position: fixed;
    bottom:0;
    left:0;
    right:0;
    z-index:1024;
    padding:0.2rem;
    font-size:0.32rem;
    background:#fff;
}
.input-warp .input .btn .text{
    border:0;
    outline:none;
    background:#f1f1f1;
    resize:none;
    width:100%;
    font-family:'xiaomi';
    border-radius:0.08rem;
    font-size:0.3rem;
    padding:0.2rem;
    display: block;
}
.input-warp .input .btn .bottom{
    margin-top:0.2rem;
    text-align: right;
}
.input-warp .input .btn .bottom button{
    font-size:0.28rem;
    padding:0.1rem 0.16rem;
    color:#999;
    border:0;
    border-radius:0.1rem;
}
.input-warp .input .btn .bottom .active{
    color:#fff;
    background:#00bfff;
}
</style>